<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--
        盒子模型的组成： 1.content(内容)  2.padding(内边距)  3.border(边框)  4.margin(外边框)
    -->
    <title>Document</title>
    <style>
        div{
            /*width，heigth都是设置内容区*/
            /*设置内容区的宽*/
            width:400px;
            /*设置内容区的高*/
            height:400px;

            /*设置内边距，设置的背景颜色会覆盖内边距的区域(只填充该区域，不填充其他区域)*/
            /*正方形填充： 设大小为x,则上下左右均会填充x大小*/
            padding: 20px;

            /*设置边框，设置的背景颜色会覆盖边框的区域(只填充该区域，不填充其他区域)*/
            /*正方形填充： 设大小为x,则上下左右均会填充x大小*/
            border: 10px solid black;

            /*设置外边距，设置盒子所在位置*/
            margin:50px;

            /*盒子的大小=content+左右padding+左右border*/
            font-size:20px;
            background-color: gray;
        }
    </style>
</head>
<body>
    <div>崩坏三</div>
</body>
</html>